<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog"></custom>
		<view class="main_containers">
			<pageTitle name="NEWS" :navBarArr="navBarArr"></pageTitle>
			<view class="main_containers_news">
				<!-- <view class="main_containers_news_top">
					<view class="main_containers_news_top_title">
						NEWS CATEGORY
					</view>
					<view class="main_containers_news_top_title_dec">

						<view class="main_containers_news_top_title_dec_item display_flex"
							v-for="(item,index) in classArr" :key="index">
							<view class="main_containers_news_top_title_dec_item_name"> {{item.name}}</view>

							<view class="main_containers_news_top_title_dec_item_text" v-if="index!=classArr.length-1">
							</view>
						</view>
					</view>
				</view> -->
			<!-- 	<view class="main_containers_news_top">
					<view class="main_containers_news_top_title">
						ARCHIVE
					</view>
					<view class="main_containers_news_top_title_dec">

						<view class="main_containers_news_top_title_dec_item display_flex"
							v-for="(item,index) in timeArr" :key="index">
							<view class="main_containers_news_top_title_dec_item_name"> {{item.name}}</view>

							<view class="main_containers_news_top_title_dec_item_text" v-if="index!=timeArr.length-1">
							</view>
						</view>
					</view>
				</view> -->
				<!-- 新闻详情 -->
				<view class="main_containers_news_detail">
					<view class="main_containers_news_detail_top display_flex">
						<view class="main_containers_news_detail_top_time">
							{{detailInfo.createTime}}
						</view>
						<view class="main_containers_news_detail_top_label">
							{{detailInfo.souceName}}
						</view>
					</view>
					<view class="main_containers_news_detail_title">
						{{detailInfo.title}}
					</view>
					<view class="main_containers_news_detail_contents">
						<!-- <image class="image_5" referrerpolicy="no-referrer"
							src="/static/content6.png" />
						<image class="image_6" referrerpolicy="no-referrer"
							src="/static/content7.png" /> -->
						<view class="text_18" v-html="detailInfo.content">
							
						</view>
					</view>
					<view class="main_containers_news_detail_btn display_flex-center" @tap="goToIndex()">
						<view class="main_containers_news_detail_btn_icon">
							<image src="@/static/pre.png" class="main_containers_news_detail_btn_icon_img"></image>
						</view>
						<view class="main_containers_news_detail_btn_text">
							返回首页
						</view>
					</view>
				</view>
			</view>
		</view>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import topDailog from '@/components/common/topDailog.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import footerContainer from '@/components/common/footer.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			pageTitle,
			footerContainer,

		},
		data() {
			return {
				topDailogStatus: false,
				id:'',
				detailInfo:{},
				navBarArr: [{
						id: '1',
						name: "首页"
					},
					{
						id: '2',
						name: "新闻"
					},
					{
						id: '3',
						name: "「Anisama 2023」每次商店购买的蓝光特典设计已公开！"
					}
				],
				classArr: [{
						id: 1,
						name: '主题'
					},
					{
						id: 2,
						name: '艺术家'
					},
					{
						id: 3,
						name: '门票'
					},
					{
						id: 4,
						name: '商品'
					},
					{
						id: 5,
						name: '全部'
					},
				],
				timeArr: [{
						id: 1,
						name: '2024.01'
					},
					{
						id: 2,
						name: '2023.12'
					},
					{
						id: 3,
						name: '2023.11'
					},
					{
						id: 4,
						name: '2023.10'
					},
					{
						id: 5,
						name: '2023.09'
					},
					{
						id: 6,
						name: '2023.08'
					},
					{
						id: 7,
						name: '2023.07'
					},
					{
						id: 8,
						name: '2023.06'
					},
				],

			}
		},
		onLoad(options) {
			let _this = this
		    this.id=options.id
		},
		onShow() {
             this.getnewDetail()
		},
		
		onReady() {



		},
		methods: {
			getnewDetail(){
				// newsId:this.id
				this.$http.Get(`${this.$api.newDetail}/${this.id}`,{}, (res) => {
					console.log(res)
					let data = res
				   if(data.souce==1){
				   	data.souceName='主题'
				   }else if(data.souce==2){
				   	data.souceName='艺术家'
				   }else if(data.souce==3){
				   	data.souceName='门票'
				   }else if(data.souce==4){
				   	data.souceName='商品'
				   }
				   this.detailInfo=data
				   this.navBarArr[2].name=data.title
				})
			},
			goToIndex(){
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
		background-image: url("../../static/bg_middle.png");
		background-size: 100% 100%;

		&_containers {
			&_news {
				padding: 0 32rpx;

				&_top {
					margin-top: 20rpx;

					&_title {
						font-size: 48rpx;
						line-height: 60rpx;
						font-weight: 700;

						&_dec {
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							&_item {
								font-size: 28rpx;

								&_text {
									margin: 0 16rpx;
									width: 2rpx;
									height: 26rpx;
									background: rgba(0, 0, 0, 0.80);
								}
							}
						}

					}
				}

				&_detail {

					&_top {
						margin-top: 60rpx;

						&_time {
							font-size: 28rpx;
							line-height: 40rpx;
							color: rgba(51, 51, 51, 1);
						}

						&_label {
							font-size: 28rpx;
							margin-left: 20rpx;
							color: rgba(234, 11, 42, 1);
							font-weight: 700;
						}
					}

					&_title {
						font-size: 40rpx;
						line-height: 60rpx;
						font-weight: 700;
					}
					&_contents{
						>image{
							width:100%;
						}
						>view{
							font-size:32rpx;
							line-height: 48rpx;
							color:rgba(0, 0, 0, 0.80);
						}
					}
					&_btn{
						width:154rpx;
						height:48rpx;
						border:1px solid rgba(234, 11, 42, 1);
						background-color: #fff;
						border-radius: 48rpx;
						margin:20rpx auto;
						&_icon{
							width:32rpx;
							height:32rpx;
							margin-right:12rpx;
							&_img{
								width:32rpx;
								height:32rpx;
							}
						}
						&_text{
							color:rgba(234, 11, 42, 1);
						}
					}
				}
			}
		}
	}
</style>